<%-- 
    Document   : ujicoba
    Created on : Dec 19, 2013, 9:30:25 PM
    Author     : Kojar
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
    String username = null;
    String privilege = null;
    Cookie[] cookies = request.getCookies();
    if (cookies != null) {
        for (Cookie cookie : cookies) {
            if (cookie.getName().equals("user")) {
                username = cookie.getValue();
            }
            if (cookie.getName().equals("privilege")) {
                privilege = cookie.getValue();
            }
        }
    }
  
%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/healby.css">
        <script type="text/javascript" src="1.7.2.jquery.min.js"></script>
        <title>Healby</title>
    </head>
    <body>
        <div id="main">
            <div id="header">
                Ini Buat Header / Banner Mungkin ?
            </div>
            <div id="Navigasi">
                Buat Navigasi antar page    
            </div>
            <div id="indexLeftColumn">
                    <table>
                        <tr>
                        <td>
                        
                           hi, <%=username %>
                        
                        </td>
                        </tr>
                        <td>
                        
                            <form action="UserProfile" method="post">
                             <input type="submit" name="Profil" value="Profil">
                             </form>
                        
                        </td>
                        <tr>
                        <td>                        
                            <form action="UserPengukuran" method="post">
                             <input type="submit" name="Pengukuran" value="Pengukuran">
                             </form>
                        </td>
                        </tr>
                        <tr>
                        <td>
                            
                        <form action="LogoutServlet" method="post">
                             <input type="submit" name="Logout" value="Logout">
                             </form>
                        </td>   
                        </tr>
                    </table>                  
            </div>
            <div id="indexRightColumn">
                <form action="ProfilServlet" method="post">
                    Nama :
                    <input type="text" name="Nama" >
                    <br>
                    Umur :
                    <input type="text" name="Umur" >
                    <div id="testingDiv1" class="clonedInput">
                        <label for="ID1_textBalita" class="test-text-Balita"> Balita :</label>
                        <br>
                        Nama Balita :
                        <%-- <label for="ID1_textNama" class="test-text-NamaBalita">Nama Balita :</label>--%>
                        <input type="text" id="ID1_textNama" name="ID1_textNama" class="test-textNama"
                               />
                        <br>
                        Umur Balita :
                        <%-- <label for="ID1_textUmur" class="test-text-UmurBalita">Umur Balita :</label>--%>
                        <input type="text" id="ID1_textUmur" name="ID1_textUmur" class="test-textUmur"
                               />            
                    </div>
                    <a href="#" id="tambah">Tambah Bayi</a>
                    <br>
                    <INPUT type="submit" value="Masukkan" name="Masukkan">
                </form>
            </div>

            <div id="footer">
                Buat hak cipta :D
            </div>
        </div>
    </body>
    <script>
        $(function() {
            $('#tambah').click(function() {
                var num = $('.clonedInput').length, // how many "duplicatable" input fields we currently have
                        newNum = new Number(num + 1), // the numeric ID of the new input field being added
                        newElem = $('#testingDiv' + num).clone().attr('id', 'testingDiv' + newNum).fadeIn('slow'); // create the new element via clone(), and manipulate it's ID using newNum value
                // manipulate the name/id values of the input inside the new element            
        <%-- newElem.find('.test-text-NamaBalita').attr('for', 'ID' + newNum + '_textNama');--%>
                newElem.find('.test-textNama').attr('id', 'ID' + newNum + '_textNama').attr('name', 'ID' + newNum + '_textNama').val('');
        <%--newElem.find('.test-text-UmurBalita').attr('for', 'ID' + newNum + '_textUmur');--%>
                newElem.find('.test-textUmur').attr('id', 'ID' + newNum + '_textUmur').attr('name', 'ID' + newNum + '_textUmur').val('');
                $('#testingDiv' + num).after(newElem);

            });
        });
    </script>
</html>